<template>
  <div class="dis-o-between" style="margin-top: 20px;">
    <div class="pie_box">
      <div class="title_box dis-o-between">
        各区域未关闭案卷数量
      </div>
      <div class="echart_pie"></div>

    </div>
    <div class="line_box">
      <div class="title_box dis-o-between">
        未关闭案卷状态统计
      </div>
      <div class="echart_line"></div>

    </div>
  </div>
</template>

<script>
import { EleResize } from '@/assets/utils/EleResize.js';
export default {
  name: 'moduleTh',
  data() {
    return {
      chartsOne: null,
      chartsTwo: null,
      statusType: [
        { value: '5', label: '已驳回' },
        { value: '4', label: '待审核' },
        { value: '1', label: '待复核' },
        { value: '0', label: '待处理' },
        { value: '2', label: '处置中' },
      ]
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() { this.initReq(); },

  beforeDestroy() { },

  methods: {
    initReq() {
      const pie = {
        "zoneCount": 11,
        "zoneCountVoList": [
          {
            "zone": "",
            "zoneCount": 5
          },
          {
            "zone": "拱墅区",
            "zoneCount": 104
          },
          {
            "zone": "上城区",
            "zoneCount": 2
          },
          {
            "zone": "西城区",
            "zoneCount": 2
          },
          {
            "zone": "西湖区",
            "zoneCount": 2
          },
          {
            "zone": "萧山区",
            "zoneCount": 5
          },
          {
            "zone": "滨江区",
            "zoneCount": 9
          },
          {
            "zone": "东城区",
            "zoneCount": 4
          },
          {
            "zone": "武昌区",
            "zoneCount": 2
          },
          {
            "zone": "吴兴区",
            "zoneCount": 1
          },
          {
            "zone": "江岸区",
            "zoneCount": 1
          }
        ]
      };
      const bar = {
        "statusCount": 5,
        "voList": [
          {
            "status": "2",
            "statusCount": 18
          },
          {
            "status": "0",
            "statusCount": 13
          },
          {
            "status": "1",
            "statusCount": 3
          },
          {
            "status": "4",
            "statusCount": 95
          },
          {
            "status": "5",
            "statusCount": 8
          }
        ]
      };

      this.echartOne(pie)
      this.echartTwo(bar)
    },
    echartOne({ zoneCount, zoneCountVoList = [] }) {
      // console.log(zoneCount, zoneCountVoList);
      const caseCount = zoneCountVoList?.reduce((total, item) => total + item.zoneCount, 0);
      const zoneCountVoListAll = zoneCountVoList?.map(item => ({ value: item.zoneCount, name: item.zone || '未知区域', percent: (item.zoneCount * 100 / caseCount).toFixed(2) }))
      this.chartsOne = this.$echarts.init(document.querySelector(".echart_pie"));
      let dom = document.querySelector(".echart_pie");
      if (dom) {
        EleResize.on(dom, this.chartsOne.resize);//自适应屏幕
        this.chartsOne.setOption({
          color: ['rgba(65, 104, 255, 0.5)', 'rgba(71, 203, 255, 0.5)', 'rgba(255, 122, 51, 0.5)', 'rgba(69, 222, 127, 0.5)', 'rgba(255, 172, 52, 0.5)', 'rgba(90, 215, 216, 0.5)'],
          title: {
            text: `系统内总计${zoneCount}个区域，未关闭案卷总数${caseCount}个`,
            textStyle: {
              color: '#666666',
              fontSize: 14,
              fontWeight: 400
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: '0',
            top: 40,
            bottom: '0',
            icon: 'circle',
            itemGap: 15,
            itemHeight: 8,
            itemWidth: 8,
            formatter: function (name) {
              const cur = zoneCountVoListAll.find(item => item.name === name)
              return ` ${cur.name}： ${cur.percent}%   ${cur.value}`;
            },
            data: zoneCountVoListAll?.map(item => item.name)
          },
          series: [
            {
              name: 'WEEKLY WRITE ARTICLES',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['30%', 180],
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: zoneCountVoListAll,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      }
    },

    echartTwo({ statusCount, voList = [] }) {
      // console.log(statusCount, voList);
      this.chartsTwo = this.$echarts.init(document.querySelector(".echart_line"));
      let dom = document.querySelector(".echart_line");
      const caseCount = voList?.reduce((total, item) => total + item.statusCount, 0);
      const voListAll = voList?.map(item => ({ value: item.statusCount, name: this.statusType.find(it => it.value === item.status)?.label }))
      if (dom) {
        EleResize.on(dom, this.chartsTwo.resize);//自适应屏幕
        this.chartsTwo.setOption({
          title: {
            text: `未关闭案卷总计${statusCount}个状态，未关闭案卷总数${caseCount}个`,
            textStyle: {
              color: '#666666',
              fontSize: 14,
              fontWeight: 400
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: 50,
            right: '10%',
            bottom: '15%',
          },
          yAxis: [{
            data: voListAll.map(item => item.name),
            axisLabel: {
              color: "rgb(30,152,211)",
            },
          }],
          xAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "rgb(30,152,211)",
            },
          }],
          series: [{
            name: '案卷数',
            type: 'bar',
            stack: 'vistors',
            barWidth: '16',
            itemStyle: {
              color: ({ dataIndex }) => ['#FF7A33', '#0066FF', '#45DE7F', '#5AD7D8', 'rgba(255, 122, 51, 0.5)'][dataIndex],
              borderRadius: [0, 8, 8, 0],
              opacity: 0.5,
            },
            data: voListAll.map(item => item.value),
            animationDuration: 6000
          }]
        })
      }
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss">
.pie_box {
  width: 48%;
  height: 400px;
  background: #fff;

  .title_box {
    position: relative;
    font-weight: bold;
    padding: 0 30px;
    height: 45px;
    line-height: 45px;
    background: #f7f8fa;
  }

  .title_box::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    height: 14px;
    width: 3px;
    background: #0066ff;
  }

  .echart_pie {
    width: 100%;
    height: 355px;
    padding: 10px;
    box-sizing: border-box;
  }
}

.line_box {
  width: 48%;
  height: 400px;
  background: #fff;

  .title_box {
    position: relative;
    font-weight: bold;
    padding: 0 30px;
    height: 45px;
    line-height: 45px;
    background: #f7f8fa;
  }

  .title_box::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    height: 14px;
    width: 3px;
    background: #0066ff;
  }

  .echart_line {
    width: 100%;
    height: 355px;
    padding: 10px;
  }

}
</style>
